<template>
  <!--(推流) -->
  <view class="push page">
	<!--  <div class="xxxxxx">
	  	<button class="btn" @click="startPreview">开启摄像头预览</button>
	  	<button class="btn" @click="startPreview">开启摄像头预览</button>
	  </div> -->
    <live-pusher
      id="livePusher"
      ref="livePusher"
      class="livePusher"
      url="rtmp://127.0.0.1:1935/live/livestream"
      mode="SD"
      :muted="true"
      :enable-camera="true"
      :auto-focus="true"
      :beauty="1"
      whiteness="2"
      aspect="9:16"
      @statechange="statechange"
      @netstatus="netstatus"
      @error="error">
	  
	  <cover-view class="ccc" @click="startPreview">
		  打开摄像头
	  </cover-view>
	  
	  <cover-view class="ccc" @click="downloadFile">
	  	  截图
	  </cover-view>
	  </live-pusher>
 <!--   <button class="btn xxxxxx" @click="start">开始推流</button>
    <button class="btn" @click="pause">暂停推流</button>
    <button class="btn" @click="resume">恢复推流</button>
    <button class="btn" @click="stop">停止推流</button>
    <button class="btn" @click="snapshot">快照</button> -->
    
<!--    <button class="btn" @click="stopPreview">关闭摄像头预览</button>
    <button class="btn" @click="switchCamera">切换摄像头</button> -->
	
  </view>
</template>
<script>
export default {
  data() {
    return {
		 pullSrc: "rtmp://127.0.0.1:1935/live/livestream",
	};
  },
  onReady() {
    // 注意：需要在onReady中 或 onLoad 延时
    this.context = uni.createLivePusherContext("livePusher", this);
  },
  methods: {
	  // 保存截图
	              downloadFile() {
					  
					  console.log(222222222222)
	                  let $this = this;
	                  uni.showLoading({ //加载框
	                      title: '保存中...',
	                      mask: true
	                  })
	                  var pages = getCurrentPages(); //获取当前页面信息
	                  var page = pages[pages.length - 1];
	                  var bitmap = null;
	                  // $this.$nextTick(()=> {
	                  var currentWebview = page.$getAppWebview();
	                  bitmap = new plus.nativeObj.Bitmap('amway_img');
	                  // 将webview内容绘制到Bitmap对象中
	                  currentWebview.draw(bitmap, function() {
	                      // console.log('截屏绘制图片成功');
	                      //这里我将文件名用四位随机数拼接了，不然会出现当前图片替换上一张图片只能保存一张图片的问题
	                      let rand = Math.floor(Math.random() * 10000)
	                      let saveUrl = '_doc/' + rand + 'a.jpg'
	                      bitmap.save(saveUrl, {}, function(i) {
	                          console.log('保存图片成功：' + JSON.stringify(i));
	                          uni.saveImageToPhotosAlbum({
	                              filePath: i.target,
	                              success: function() {
	                                  // bitmap.clear(); //销毁Bitmap图片
	                                  uni.showToast({
	                                      title: '截图成功',
	                                      duration: 1500
	                                  });
	                              },
	                              complete() {
	                                  uni.hideLoading();
	                              }
	                          });
	                      }, function(e) {
	                          console.log('保存图片失败：' + JSON.stringify(e));
	                      });
	                  }, function(e) {
	                      console.log('保存图片失败：' + JSON.stringify(e));
	                  });
	                  // })
	              },
    statechange(e) {
      console.log("statechange:" + JSON.stringify(e));
    },
    netstatus(e) {
      console.log("netstatus:" + JSON.stringify(e));
    },
    error(e) {
      console.log("error:" + JSON.stringify(e));
    },
    start: function () {
		console.log("11222")
      this.context.start({
        success: (a) => {
          console.log("livePusher.start:" + JSON.stringify(a));
        },
      });
    },
    close: function () {
      this.context.close({
        success: (a) => {
          console.log("livePusher.close:" + JSON.stringify(a));
        },
      });
    },
    snapshot: function () {
      this.context.snapshot({
        success: (e) => {
          console.log(JSON.stringify(e));
        },
      });
    },
    resume: function () {
      this.context.resume({
        success: (a) => {
          console.log("livePusher.resume:" + JSON.stringify(a));
        },
      });
    },
    pause: function () {
      this.context.pause({
        success: (a) => {
          console.log("livePusher.pause:" + JSON.stringify(a));
        },
      });
    },
    stop: function () {
      this.context.stop({
        success: (a) => {
          console.log(JSON.stringify(a));
        },
      });
    },
    switchCamera: function () {
      this.context.switchCamera({
        success: (a) => {
          console.log("livePusher.switchCamera:" + JSON.stringify(a));
        },
      });
    },
    startPreview: function () {
      this.context.startPreview({
        success: (a) => {
          console.log("livePusher.startPreview:" + JSON.stringify(a));
        },
      });
    },
    stopPreview: function () {
      this.context.stopPreview({
        success: (a) => {
          console.log("livePusher.stopPreview:" + JSON.stringify(a));
        },
      });
    },
  },
};
</script>
<style>
.pullVideo {
  width: 100%;
  height: 100%;
}
.push{
	position: relative;
	background: red;
}
.ccc{
	color: #fff;
	font-size: 24px;
}
.xxxxxx{
	position: absolute;
	bottom: 0;
	z-index: 9999;
	left: 0;
}
.livePusher{
	width: 100%;
	height: 100%;
}
uni-page-body,html,body{  
            height: 100%;  
        }
		
		.page {
				height: 100%;
			}
</style>